'use client'
import Image from "next/image";
import { useState } from "react";
import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
export default function Home() {
  const [input, setInput] = useState('')
  const [model, setModel] = useState("deepseeek-v3")
  const handleChangeModel = () => {
    setModel(model === 'deepseek-v3' ? 'deepseek-r1' : 'deepseek-v3')
  }
  return (
    <div className="h-screen flex flex-col items-center">
      <div className="h-4/5"></div>
      <div className="w-1/2 ">
        <p className="text-bold text-2xl text-center">有什么可以帮你的吗？</p>
        <div className="flex flex-col items-center justify-center mt-4 shadow-lg border-2 p-2 border-gray-300 h-50 rounded-lg">
          <textarea className="w-full rounded-b-lg p-3 h-100 focus:outline-none" value={input} onChange={(e) => setInput(e.target.value)}></textarea>
          <div className="flex flex-row items-center justify-between w-full">
            <div>
              < p className="text-sm  rounded-md border-2 p-2 border-gray-300" onClick={handleChangeModel}>
                深度思考 (R1)
              </p>
            </div>
            <div className="flex items-center justify-center  border-2 mr-4 border-black p-1 rounded-full">
              <ArrowCircleRightIcon></ArrowCircleRightIcon>
            </div>
          </div>

          <div>
          </div>
        </div>
      </div>
    </div >
  );
}
